<template>
  <div class="smiler">
    <van-nav-bar title="相似商品" left-arrow @click-left="onClickLeft">
      <van-icon name="ellipsis" slot="right" />
    </van-nav-bar>
    <div class="one">
      <div v-for="(item, index) in oneShop" :key="index" style="width: 100%; overflow: hidden;">
        <div class="img_box">
          <img :src="item.image" alt />
        </div>
        <div class="one_con">
          <span class="namelegth">{{item.goods_name.slice(2).slice(0,30)+'...'}}</span>
          <div class="price_box">
            <p>
              <span>￥{{item.price}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <van-divider :style="{ color: '#999999', borderColor: '#999999', padding: '0 16px' }">为你找到以下相似商品</van-divider>
    <div class="one">
      <div v-for="(item, index) in sameShop" :key="index" style="width: 100%; overflow: hidden; margin-top: 2px;">
        <div class="img_box">
          <img :src="item.image" alt />
        </div>
        <div class="one_con">
          <span class="namelegth">{{item.goods_name.slice(2).slice(0,30)+'...'}}</span>
          <div class="price_box">
            <p>
              <span>￥{{item.price}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      oneShop: [],
      sameShop: []
    }
  },
  created () {
    this.getShop()
  },
  methods: {
    // 返回上一级
    onClickLeft () {
      this.$router.go(-1)
      sessionStorage.removeItem('id')
    },
    // 响应商品
    getShop () {
      let id = sessionStorage.getItem('id')
      // console.log(id)
      this.$http.get(`/one_shop?id=${id}`).then(res => {
        // console.log(res)
        this.oneShop = res.data.result
        this.sameShop = res.data.data
      })
    }
  }
}
</script>

<style  lang='less'>
.smiler .van-nav-bar .van-icon {
  color: #333;
  font-size: 30px;
}

.smiler .van-nav-bar .van-nav-bar__title {
  font-size: 30px;
}

.smiler .one {
  background-color: #fff;
  width: 100%;
  height: 10rem;
  margin-top: 2px;
}

.smiler .one .img_box,
.smiler .one .one_con {
  float: left;
  background-color: #fff;
}

.smiler .one .img_box {
  width: 10rem;
  height: 10rem;
}

.smiler .one .img_box img {
  width: 100%;
  height: 100%;
}

.smiler .one .one_con {
  width: 15.85rem;
  height: 10rem;
  position: relative;
  padding: 1rem;
}

.smiler .one .one_con .namelegth {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 16px
}

.smiler .one .one_con .price_box {
  position: absolute;
  bottom: 1rem;
  color: #f20c59;
  font-size: 18px;
  font-family: arial;
}
</style>
